<template>
  <div>
    <!-- 查询区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单编号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="营业中" value="1"></el-option>
            <el-option label="暂停营业" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易流水号">
          <el-input v-model="searchForm.orderNo" placeholder="请输入交易流水号"></el-input>
        </el-form-item>
        <el-form-item label="交易时间">
          <el-date-picker
              v-model="searchForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期时间"
              end-placeholder="结束日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="handleTimeChange"
              :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 数据表格 -->
    <el-card>
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
      >
        <el-table-column prop="tcWaybillNo" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="otherOrderNo" label="渠道支付流水号" width="250"></el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template slot-scope="scope">
            {{ scope.row.type === 1 ? '收入' : '退款' }}
          </template>
        </el-table-column>
        <el-table-column prop="payStatus" label="支付状态" width="120">
          <template slot-scope="scope">
            {{ scope.row.payStatus === 9 ? '退款中' :scope.row.payStatus === 8 ? '已退款' :
              scope.row.payStatus === 7 ? '支付中' :
                  scope.row.payStatus === 2 ? '支付完成' :'' }}
          </template>
        </el-table-column>
        <el-table-column prop="pricePaid" label="交易金额" min-width="200"></el-table-column>
        <el-table-column prop="currency" label="币种" width="120">CNY</el-table-column>
        <el-table-column prop="updateTime" label="交易时间" width="180"
                         :formatter="(row,col) => formatTime(row[col.property])"></el-table-column>
        <el-table-column prop="paymentChannel" label="支付渠道" width="150">
          微信支付
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="pagination"
      ></el-pagination>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="50%"
        @close="resetForm"
    >
      <el-form
          :model="formData"
          :rules="rules"
          ref="formRef"
          label-width="120px"
      >
        <el-form-item label="服务区域" prop="serviceRegion">
          <el-input v-model="formData.serviceRegion"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="formData.latitude"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="formData.longitude"></el-input>
        </el-form-item>
        <el-form-item label="详情地址" prop="detailedAddress">
          <el-input v-model="formData.detailedAddress" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="personInCharge">
          <el-input v-model="formData.personInCharge"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="contactNumber">
          <el-input v-model="formData.contactNumber"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">营业中</el-radio>
            <el-radio :label="0">暂停营业</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getInfo} from '@/api/bill'
import moment from 'moment';
import axios from "axios";
import {saveAs} from 'file-saver'
export default {
  data() {
    return {
      searchForm: {
        timeRange: [],
        orderNo: '',
        personInCharge: '',
        status: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '新增服务区域',
      formData: {
        id: '',
        serviceRegion: '',
        latitude: '',
        longitude: '',
        detailedAddress: '',
        personInCharge: '',
        contactNumber: '',
        status: 1
      },
      rules: {
        serviceRegion: [{required: true, message: '请输入服务区域', trigger: 'blur'}],
        latitude: [{required: true, message: '请输入纬度', trigger: 'blur'}],
        longitude: [{required: true, message: '请输入经度', trigger: 'blur'}],
        detailedAddress: [{required: true, message: '请输入详情地址', trigger: 'blur'}],
        personInCharge: [{required: true, message: '请输入负责人', trigger: 'blur'}],
        contactNumber: [{required: true, message: '请输入联系方式', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleTimeChange(val) {
      this.searchForm.timeRange = val
      console.log('选择的时间范围:', val)
      // 这里可以触发查询或其他操作
    },
    formatTime(date) {
      console.log(date)
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    fetchData() {
      this.loading = true
      getInfo(this.pagination.currentPage, this.pagination.pageSize, this.searchForm).then(res => {
        // login(this.formData).then(res => {
        console.log(res)
        this.loading = false
        if (res.code === 200) {
          this.pagination.total = res.data.total
          this.tableData = res.data.recordList
        }
        // 处理登录成功逻辑
      }).catch(err => {
        this.loading = false
        console.log(err)
        // 错误已在拦截器统一处理
      })
    },
    handleSearch() {
      this.pagination.currentPage = 1
      this.fetchData()
    },
    async handleExport() {
      console.log(); // 输出配置的 API 地址
      this.loading = true
      try {
        const response = await axios.get(process.env.VUE_APP_BASE_API + '/home/payment-bill/export', {
          responseType: 'blob',
          params: { /* 查询参数 */}
        })
        console.log(2121)
        // 处理中文文件名
        const timestamp = new Date().getTime(); // 或 Date.now()
        console.log(timestamp); // 输出如 1725576158000
        const fileName = '账单列表_' + timestamp + ".zip"

        saveAs(new Blob([response.data]), fileName)
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败')
      } finally {
        this.loading = false
      }
    },
    resetSearch() {
      this.searchForm = {
        timeRange: [],
        serviceRegion: '',
        personInCharge: '',
        status: ''
      }
      this.handleSearch()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    },
    handleAdd() {
      this.dialogTitle = '新增服务区域'
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑服务区域'
      this.formData = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleDelete() {
      this.$confirm('确认删除该服务区域吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.fetchData()
      }).catch(() => {
      })
    },
    resetForm() {
      this.$refs.formRef.resetFields()
      this.formData = {
        id: '',
        serviceRegion: '',
        latitude: '',
        longitude: '',
        detailedAddress: '',
        personInCharge: '',
        contactNumber: '',
        status: 1
      }
    }
  }
}
</script>

<style scoped>
.service-serviceRegion-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  margin-top: 10px;
}

.operation-serviceRegion {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
